<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />

		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			//jquery执行函数(onload很像)将页面dom元素加载完毕后,执行回调函数
			// onload 和jQuery的区别?
			
			$(function(){
				//显示修改删除
				$(".list li").mouseover(function(){
					$(this).children(".inner_menu").show();
				}).mouseout(function(){
					$(this).children(".inner_menu").hide()
				});
				
				//单击事件
				$(".inner_menu a").click(function(){
					 var index = $(this).index();
					 var txt = $(this).parent().siblings("i").html();
					 var content = `
						<div class="inner_form">
							<input type="text" id="title" value="${txt}" />
							<input type="button" id="add" value="提交" />
							<a href="#">取消</a>
						</div>
					 `;
					 //获取以存在的所有类样式为.inner_form的元素,然后删除
					 $(".inner_form").remove();
					 
					//判断是否存在样式为	inner_form的标签	 			//alert($(this).parents("li").children(".inner_form").size());
					 
					 if(index == 0){
					 	//修改
					 	//alert($(this).parents("li").html());
					 	$(this).parent().after(content);
					 	
					 }else if(index ==1){
						//删除
						$(this).parents("li").remove();
					 }
				})
				
				//后置绑定->可以为动态创建的元素绑定事件
				$(".list").on("click","#add",function(){
					var value = $(this).prev().val();
					$(this).parents("li").children("i").html(value);
					$(this).parent().remove();
				})
				$(".list").on("click",".inner_form a",function(){
					$(this).parent().remove();
				})
				
				
			})
			
		</script>

	</head>

	<body>
		<div class="head">
			TODOList
		</div>
		<div class="main">
			<div class="left_list">
				<div class="title">
					<span class="iconfont icon-liebiao"></span> 项目
				</div>
				<div class="list">
					<ul>
						<li><span class="iconfont icon-tag"></span>
							<i>默认</i>
						</li>
						<li><span class="iconfont icon-tag"></span> <i>个人</i>
							<div class="inner_menu">
								<a href="#">修改</a>
								<a href="#">删除</a>
							</div>
						</li>
						<li><span class="iconfont icon-tag"></span> <i>工作</i>
							<div class="inner_menu">
								<a href="#">修改</a>
								<a href="#">删除</a>
							</div>
						</li>
					</ul>
				</div>
				<div class="add">
					<a href="#"><span class="iconfont icon-editor"></span> 添加项目</a>
				</div>
			</div>
			<div class="right_item">
				右
			</div>
		</div>
		
		
	</body>

</html>